<script setup lang="ts">
  import { onMounted, onUnmounted, computed, ref, reactive } from 'vue'
  import { ElMessage } from 'element-plus'
  import { api } from '@/utils/request'
  import { useI18n } from 'vue-i18n'
  import { useHomepageStore } from '../stores/homepage'
  import { useLanguageStore } from '../stores/language'

  const { t, locale } = useI18n()

  const homepageStore = useHomepageStore()
  const languageStore = useLanguageStore()

  // 计算属性：当前语言
  const currentLang = computed(() => languageStore.currentLanguage)

  // 计算属性：公司名称
  const companyName = computed(() => {
    return homepageStore.getCompanyName(currentLang.value)
  })

  // 计算属性：产品区域标题
  const productsTitle = computed(() => {
    return homepageStore.getProductsTitle(currentLang.value)
  })

  // 计算属性：产品列表
  const products = computed(() => {
    return homepageStore.getProducts(currentLang.value)
  })

  // 计算属性：质量认证图标
  const certifications = computed(() => {
    return homepageStore.getCertifications()
  })

  // 计算属性：背景图片样式
  const heroStyle = computed(() => {
    const bgImage = homepageStore.settings.homepage_hero_background
    if (bgImage) {
      return {
        backgroundImage: `linear-gradient(rgba(52, 152, 219, 0.8), rgba(52, 152, 219, 0.8)), url(${bgImage})`
      }
    }
    return {
      background: 'linear-gradient(rgba(52, 152, 219, 0.8), rgba(52, 152, 219, 0.8))'
    }
  })

  // 计算属性：About Us标题
  const aboutTitle = computed(() => {
    return homepageStore.getAboutTitle(currentLang.value)
  })

  // 计算属性：About Us内容
  const aboutContent = computed(() => {
    return homepageStore.getAboutContent(currentLang.value)
  })

  // 计算属性：About Us图片
  const aboutImage = computed(() => {
    return homepageStore.getAboutImage()
  })

  // 计算属性：视频URL
  const videoUrl = computed(() => {
    return homepageStore.getVideoUrl()
  })

  // 计算属性：流程步骤
  const processSteps = computed(() => {
    return homepageStore.getProcessSteps()
  })

  // 计算属性：当前语言
  const currentLanguage = computed(() => currentLang.value)

  // 获取步骤标题的方法
  const getProcessStepTitle = (step: any, lang: string) => {
    return homepageStore.getProcessStepTitle(step, lang)
  }

  // 获取步骤描述的方法
  const getProcessStepDescription = (step: any, lang: string) => {
    return homepageStore.getProcessStepDescription(step, lang)
  }

  // 认证轮播相关
  const currentCertIndex = ref(0)
  let certCarouselTimer: NodeJS.Timeout | null = null

  // 质量认证区域轮播相关
  const currentCertificationIndex = ref(0)
  let certificationCarouselTimer: NodeJS.Timeout | null = null

  // 动画相关的refs
  const sectionTitleRef = ref<HTMLElement | null>(null)
  const productsShowRef = ref<HTMLElement | null>(null)
  const aboutRightHeaderRef = ref<HTMLElement | null>(null)
  const aboutRightTitleRef = ref<HTMLElement | null>(null)
  let observer: IntersectionObserver | null = null

  // 启动认证图标轮播
  const startCertCarousel = () => {
    stopCertCarousel() // 先停止之前的定时器

    if (certifications.value.length <= 1) return

    certCarouselTimer = setInterval(() => {
      currentCertIndex.value = (currentCertIndex.value + 1) % certifications.value.length
    }, 3000) // 每3秒切换一个
  }

  // 停止认证图标轮播
  const stopCertCarousel = () => {
    if (certCarouselTimer) {
      clearInterval(certCarouselTimer)
      certCarouselTimer = null
    }
  }

  // 质量认证区域轮播控制
  const startCertificationCarousel = () => {
    stopCertificationCarousel()
    if (certifications.value.length <= 6) return // 6个以下不需要轮播

    certificationCarouselTimer = setInterval(() => {
      nextCertification()
    }, 4000) // 每4秒自动切换
  }

  const stopCertificationCarousel = () => {
    if (certificationCarouselTimer) {
      clearInterval(certificationCarouselTimer)
      certificationCarouselTimer = null
    }
  }

  // 上一组认证
  const prevCertification = () => {
    const maxIndex = Math.max(0, certifications.value.length - 6)
    currentCertificationIndex.value = Math.max(0, currentCertificationIndex.value - 1)
  }

  // 下一组认证  
  const nextCertification = () => {
    const maxIndex = Math.max(0, certifications.value.length - 6)
    currentCertificationIndex.value = currentCertificationIndex.value >= maxIndex ? 0 : currentCertificationIndex.value + 1
  }


  // 表单数据
  const contactForm = reactive({
    name: '',
    email: '',
    phone: '',
    whatsapp: '',
    message: ''
  })

  const submitting = ref(false)

  // 提交表单
  const submitForm = async () => {
    // 简单验证
    if (!contactForm.name.trim()) {
      ElMessage.error(t('contact.form.nameRequired'))
      return
    }

    if (!contactForm.email.trim()) {
      ElMessage.error(t('contact.form.emailRequired'))
      return
    }

    if (!contactForm.message.trim()) {
      ElMessage.error(t('contact.form.messageRequired'))
      return
    }

    // 邮箱格式验证
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    if (!emailRegex.test(contactForm.email)) {
      ElMessage.error(t('contact.form.emailFormat'))
      return
    }

    submitting.value = true

    try {
      const response = await api.post('/contact/submit', {
        ...contactForm,
        language: locale.value
      })

      if (response.success) {
        ElMessage.success(t('contact.form.submitSuccess'))
        // 重置表单
        Object.keys(contactForm).forEach(key => {
          contactForm[key as keyof typeof contactForm] = ''
        })
      }
    } catch (error: any) {
      if (error.response?.data?.message) {
        ElMessage.error(error.response.data.message)
      } else {
        ElMessage.error(t('contact.form.submitError'))
      }
    } finally {
      submitting.value = false
    }
  }

  // 创建 Intersection Observer
  const createObserver = () => {
    observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('animate')
        }
      })
    }, {
      threshold: 0.1
    })
  }

  // 页面加载时获取配置
  onMounted(async () => {
    await homepageStore.fetchSettings()
    languageStore.initLanguage()

    // 创建观察器
    createObserver()

    // 观察元素
    if (sectionTitleRef.value) {
      observer?.observe(sectionTitleRef.value)
    }
    if (productsShowRef.value) {
      observer?.observe(productsShowRef.value)
    }
    if (aboutRightHeaderRef.value) {
      observer?.observe(aboutRightHeaderRef.value)
    }
    if (aboutRightTitleRef.value) {
      observer?.observe(aboutRightTitleRef.value)
    }

    // 延迟启动认证图标轮播，确保数据已加载
    setTimeout(() => {
      startCertCarousel()
      startCertificationCarousel()
    }, 500)
  })

  // 页面卸载时清理定时器和观察器
  onUnmounted(() => {
    stopCertCarousel()
    stopCertificationCarousel()
    if (observer) {
      observer.disconnect()
    }
  })
</script>

<template>
  <div class="home">
    <!-- Hero Section / 顶部区域 -->
    <section class="hero" :style="heroStyle">
      <!-- Logo - 左上角 -->
      <div v-if="homepageStore.settings.homepage_logo" class="hero-logo-container">
        <img :src="homepageStore.settings.homepage_logo" alt="Logo" class="hero-logo" />
      </div>

      <!-- 中间内容 -->
      <div class="hero-content">
        <h1>{{ companyName }}</h1>
      </div>

      <!-- 质量认证图标 - 右下角轮播 -->
      <div v-if="certifications && certifications.length > 0" class="hero-certifications">
        <div class="cert-carousel">
          <div v-for="(cert, index) in certifications" :key="cert.order"
            :class="['cert-item', { active: currentCertIndex === index }]">
            <img v-if="cert.image" :src="cert.image" :alt="cert.name" class="cert-icon" />
            <span v-else>{{ cert.name }}</span>
          </div>
        </div>
        <!-- 轮播指示器 -->
        <div v-if="certifications.length > 1" class="cert-indicators">
          <span v-for="(cert, index) in certifications" :key="index"
            :class="['indicator', { active: currentCertIndex === index }]" @click="currentCertIndex = index"></span>
        </div>
      </div>
    </section>

    <!-- Products Section / 产品展示区域 -->
    <section class="products" id="collection">
      <div class="container">
        <!-- 左侧菜单区域 -->
        <div class="menu">
          <h2 ref="sectionTitleRef" class="section-title">{{ productsTitle }}</h2>
          <!-- 分割线 -->
          <div class="divider"></div>
          <div>
            <!-- 整鱼，鱼片，产品烹饪 -->
            <div class="menu-item">
              <router-link to="/products">
                整鱼产品
              </router-link>
            </div>
            <div class="menu-item">
              <router-link to="/products">
                鱼片产品
              </router-link>
            </div>
            <div class="menu-item">
              <router-link to="/products">
                产品烹饪
              </router-link>
            </div>
          </div>
          <!-- PRODUCTS SHOW -->
          <p ref="productsShowRef" class="products-show">
            PRODUCTS SHOW
          </p>
        </div>
        <div class="products-grid">
          <div v-for="product in 6" :key="product.index" class="product-card">
            <div class="product-image-wrapper">
              <img src="https://picsum.photos/200/200" :alt="product.name" class="product-image" />
              <div class="product-overlay">
                <p>{{ product.name }}商品名</p>
              </div>
            </div>
            <h3>{{ product.name }}商品名</h3>
          </div>
        </div>
      </div>
    </section>

    <!-- About Us Section -->
    <!-- <section class="about-us" v-if="aboutTitle || aboutContent || aboutImage"> -->
    <section class="about-us">
      <div class="container about-container">
        <!-- 左侧内容 -->
        <div class="about-content">
          <div class="about-text">
            <p>{{ aboutContent }}拉开克拉生的绿卡就是看到啊实打实大苏打</p>
          </div>
          <!-- 8图片自动滚动 -->
          <!-- <div class="about-image" v-if="aboutImage"> -->
          <div class="about-image">
            <img src="https://picsum.photos/200/200" :alt="aboutTitle" />
          </div>
        </div>
        <!-- 右侧内容 -->
        <div class="about-right">
          <div class="about-right-header">
            <p ref="aboutRightTitleRef" class="about-right-title">About Us</p>
            <!-- 分割线靠右 -->
            <div class="divider"></div>
          </div>
          <img src="https://picsum.photos/200/200" alt="tu">
          <!-- 更多内容 -->
          <div class="about-right-more">
            <!-- 十字 -->
            <div class="cross">＋</div>
          </div>
        </div>
      </div>
    </section>

    <!-- Quality Certification Section -->
    <section class="quality-certification" v-if="certifications && certifications.length > 0">
      <div class="container">
        <h2 class="section-title">QUALITY CERTIFICATION</h2>
        <div class="certification-carousel">
          <div class="cert-track" :style="{ transform: `translateX(-${currentCertificationIndex * 100}px)` }">
            <div v-for="(cert, index) in certifications" :key="cert.order" class="certification-item">
              <img v-if="cert.image" :src="cert.image" :alt="cert.name" class="certification-logo" />
              <span v-else class="certification-text">{{ cert.name }}</span>
            </div>
          </div>
        </div>
        <!-- 轮播控制按钮 -->
        <div class="carousel-controls" v-if="certifications.length > 6">
          <button @click="prevCertification" class="carousel-btn prev">‹</button>
          <button @click="nextCertification" class="carousel-btn next">›</button>
        </div>
      </div>
    </section>

    <!-- Video Section -->
    <section class="video-section" v-if="videoUrl">
      <div class="container">
        <div class="video-wrapper">
          <video :src="videoUrl" controls class="homepage-video" poster="">
            Your browser does not support the video tag.
          </video>
        </div>
      </div>
    </section>

    <!-- Process Steps Section -->
    <section class="process-steps" v-if="processSteps && processSteps.length > 0">
      <div class="container">
        <div class="steps-grid">
          <div v-for="(step, index) in processSteps" :key="step.step" class="step-item">
            <div class="step-number">{{ step.step }}</div>
            <div class="step-icon" v-if="step.icon">
              <img :src="step.icon" :alt="getProcessStepTitle(step, currentLanguage)" />
            </div>
            <h3 class="step-title">{{ getProcessStepTitle(step, currentLanguage) }}</h3>
            <p class="step-description">{{ getProcessStepDescription(step, currentLanguage) }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Contact Section -->
    <section class="contact" id="contact">
      <div class="container">
        <div class="contact-content">
          <div class="contact-info">
            <h2>{{ $t('contact.title') }}</h2>
            <p>{{ $t('contact.subtitle') }}</p>
          </div>
          <form @submit.prevent="submitForm" class="contact-form">
            <div class="form-group">
              <label>{{ $t('contact.form.name') }}</label>
              <input type="text" v-model="contactForm.name" :placeholder="$t('contact.form.namePlaceholder')"
                required />
            </div>
            <div class="form-group">
              <label>{{ $t('contact.form.email') }}</label>
              <input type="email" v-model="contactForm.email" :placeholder="$t('contact.form.emailPlaceholder')"
                required />
            </div>
            <div class="form-group">
              <label>{{ $t('contact.form.phone') }}</label>
              <input type="tel" v-model="contactForm.phone" :placeholder="$t('contact.form.phonePlaceholder')" />
            </div>
            <div class="form-group">
              <label>{{ $t('contact.form.whatsapp') }}</label>
              <input type="text" v-model="contactForm.whatsapp" :placeholder="$t('contact.form.whatsappPlaceholder')" />
            </div>
            <div class="form-group">
              <label>{{ $t('contact.form.enquiry') }}</label>
              <textarea rows="4" v-model="contactForm.message" :placeholder="$t('contact.form.enquiryPlaceholder')"
                required></textarea>
            </div>
            <button type="submit" :disabled="submitting">
              {{ submitting ? t('contact.form.submitting') : $t('contact.form.submit') }}
            </button>
          </form>
        </div>
      </div>
    </section>
    <!-- 右侧分享tiktok，whatsapp，邮箱 -->
    <div class="share">
      <div class="share-icons">
        <a href="https://www.tiktok.com" target="_blank" rel="noopener" class="share-icon">
          <img src="https://www.bing.com/th/id/OIP.A7B37vseC8xmzBfUXeXDtgAAAA?w=171&h=194&c=7&r=0&o=7&pid=1.7&rm=3"
            alt="TikTok" />
        </a>
        <a href="https://www.whatsapp.com" target="_blank" rel="noopener" class="share-icon">
          <img
            src="https://th.bing.com/th/id/OSAAS.E589693F606AE4CB3E982768E2BA23AD?w=72&h=72&c=17&rs=1&o=6&pid=TechQna"
            alt="WhatsApp" />
        </a>
        <a href="mailto:" target="_blank" rel="noopener" class="share-icon">
          <el-icon>
            <Message />
          </el-icon>
        </a>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    position: relative;
  }

  .share {
    position: fixed;
    top: 50%;
    right: 0;
    background: white;
    transform: translateY(-50%);
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .share-icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .share-icons img {
    width: 30px;
    height: 30px;
  }

  .share-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #fff;
  }

  .share-icon {
    font-size: 26px;
    background: linear-gradient(to right, #ffc107, #ff9800);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .share-icons a:hover {
    background-color: #f5f5f5;
  }

  /* Hero Section */
  .hero {
    background-size: cover;
    background-position: center;
    height: 500px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
  }

  /* Logo - 左上角 */
  .hero-logo-container {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 10;
  }

  .hero-logo {
    height: 60px;
    width: auto;
    object-fit: contain;
    /* 移除滤镜，保持原始颜色 */
    /* filter: brightness(0) invert(1); */
  }

  /* 中间内容 */
  .hero-content {
    text-align: center;
    z-index: 5;
  }

  .hero-content h1 {
    font-size: 48px;
    margin: 0;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  }

  /* 质量认证图标 - 右下角轮播 */
  .hero-certifications {
    position: absolute;
    bottom: 30px;
    right: 30px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .cert-carousel {
    position: relative;
    width: 80px;
    height: 60px;
    overflow: hidden;
  }

  .cert-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.3s ease;
  }

  .cert-item.active {
    opacity: 1;
    transform: translateX(0);
  }

  .cert-icon {
    height: 30px;
    width: auto;
    object-fit: contain;
  }

  .cert-item span {
    font-weight: bold;
    font-size: 12px;
    color: white;
  }

  /* 轮播指示器 */
  .cert-indicators {
    display: flex;
    gap: 5px;
  }

  .indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: background 0.3s ease;
  }

  .indicator.active {
    background: rgba(255, 255, 255, 0.8);
  }

  /* Products Section */
  .products {
    padding: 60px 0;
    background: #f8f9fa;
  }

  .menu {
    width: 276px;
    margin-right: 30px;
    border: 1px solid lightgray;
    padding: 40px 20px;
  }

  .section-title {
    text-align: center;
    color: #2c3e50;
    margin-bottom: 50px;
    font-size: 36px;
    font-weight: bold;
    opacity: 0;
    transform: translateX(-100%);
    transition: all 0.8s ease-out;
  }

  .section-title.animate {
    opacity: 1;
    transform: translateX(0);
  }

  .divider {
    width: 50%;
    height: 2px;
    background: #28a745;
    margin-bottom: 30px;
  }

  .about-right-more {
    height: 90px;
    background: white;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    margin-top: -5px;
  }

  .about-right-more .cross {
    /* 十字 */
    font-size: 40px;
    font-weight: bold;
    color: gray;
    text-align: center;
    line-height: 90px;
  }

  .menu-item {
    width: 100%;
    height: 60px;
    margin-bottom: 20px;
    font-size: 18px;
    text-align: center;
    /* 背景颜色和图片混合 */
    background-blend-mode: multiply;
    background: rgba(63, 133, 63, 0.9) url(https://picsum.photos/200/200);
    background-size: 100%;
    color: white;
    line-height: 60px;
    cursor: pointer;
    transition: all 0.5s;
  }

  .menu-item:hover {
    background: rgba(63, 133, 63, 0.9);
  }

  .products-show {
    font-size: 40px;
    font-weight: bold;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.8s ease-out;
    transition-delay: 0.3s;
  }

  .products-show.animate {
    opacity: 1;
    transform: translateY(0);
  }

  .products-grid {
    display: grid;
    /* 3*n 列，n为自动填充的列数 */
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }

  .product-card {
    overflow: hidden;
    transition: transform 0.3s;
    text-align: center;
    padding: 20px;
    position: relative;
    cursor: pointer;
  }

  .product-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    font-size: 14px;
    background: rgba(63, 133, 63, 0.9);
    color: white;
    opacity: 0;
    transition: all 0.1s;
    line-height: 50px;
  }



  .product-card:hover .product-overlay {
    opacity: 1;
    height: 52px;
    line-height: 52px;
    font-size: 16px;
  }

  .product-image-wrapper {
    width: 200px;
    height: 200px;
    margin: 0 auto 20px;
    overflow: hidden;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 图片放大 */
  .product-image-wrapper:hover .product-image {
    transform: scale(1.1);
    transition: transform 0.3s ease-in-out;
  }

  .product-card h3 {
    color: #2c3e50;
    font-size: 18px;
    margin: 0;
  }

  /* About Us Section */
  .about-us {
    padding: 0;
    background: rgb(244, 244, 244);
  }

  .about-container {
    display: flex;
    gap: 40px;
  }

  .about-content {
    width: calc(100% - 300px);
    flex: 1;
    padding: 20px 0;
  }

  .about-text p {
    margin-bottom: 20px;
    color: #666;
    line-height: 1.8;
    font-size: 16px;
  }

  .about-image img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 8px;
  }

  .about-right {
    width: 300px;
    text-align: right;
  }

  .about-right-header {
    height: 175px;
    text-align: right;
    background: rgba(63, 133, 63, 0.9);
  }

  .about-right-header p {
    color: white;
    font-size: 36px;
    font-weight: bold;
    line-height: 100px;
    margin: 0 20px 0 0;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.8s ease-out;
  }
  
  .about-right-header p.animate {
    opacity: 1;
    transform: translateX(0);
  }

  .about-right-header .divider {
    margin: 0 20px 0 auto;
    background: white;
  }

  .about-right img {
    width: 100%;
    object-fit: cover;
  }

  /* Quality Certification Section */
  .quality-certification {
    padding: 60px 0;
    background: #fff;
  }

  .certification-carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
  }

  .cert-track {
    display: flex;
    transition: transform 0.5s ease;
    gap: 20px;
  }

  .certification-item {
    flex: 0 0 auto;
    width: 120px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: 15px;
  }

  .certification-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: none;
  }

  .certification-text {
    font-weight: bold;
    font-size: 12px;
    color: #666;
    text-align: center;
  }

  /* 轮播控制按钮 */
  .carousel-controls {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
  }

  .carousel-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #28a745;
    color: white;
    border: none;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .carousel-btn:hover {
    background: #218838;
    transform: scale(1.1);
  }

  .carousel-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
  }

  /* Video Section */
  .video-section {
    padding: 60px 0;
    background: #f8f9fa;
  }

  .video-wrapper {
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .homepage-video {
    width: 100%;
    max-width: 900px;
    height: auto;
    min-height: 400px;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    background: #000;
  }

  /* Process Steps Section */
  .process-steps {
    padding: 60px 0;
    background: white;
  }

  .steps-grid {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 60px;
    margin-top: 40px;
    flex-wrap: wrap;
  }

  .step-item {
    text-align: center;
    padding: 20px 15px;
    max-width: 200px;
    flex: 1;
    min-width: 150px;
    transition: all 0.3s ease;
    position: relative;
  }

  .step-item:hover {
    transform: translateY(-3px);
  }

  .step-number {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #ff6b6b, #feca57);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 24px;
    margin: 0 auto 20px;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
    border: 3px solid white;
  }

  .step-icon {
    margin: 15px 0;
  }

  .step-icon img {
    width: 50px;
    height: 50px;
    object-fit: contain;
  }

  .step-title {
    font-size: 18px;
    font-weight: 600;
    margin: 15px 0 8px;
    color: #333;
    line-height: 1.3;
  }

  .step-description {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin: 0;
    padding: 0 5px;
  }

  /* Contact Section */
  .contact {
    padding: 80px 0;
    background: rgba(63, 133, 63, 0.9) url('https://picsum.photos/200/200');
    background-size: cover;
    /* 背景颜色图片融合 */
    background-blend-mode: multiply;
  }

  .contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .contact-info h2,
  .contact-info p {
    color: white;
    margin-bottom: 20px;
    font-size: 32px;
  }

  .contact-form {
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .form-group {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
  }

  .form-group label {
    margin-bottom: 5px;
    margin-right: 10px;
    color: white;
    font-weight: 500;
  }

  .form-group input,
  .form-group textarea {
    width: 300px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
  }

  button {
    background: #28a745;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s;
  }

  button:hover {
    background: #218838;
  }

  /* Responsive Design */
  @media (max-width: 768px) {
    .hero-content h1 {
      font-size: 32px;
    }

    .hero-logo-container {
      top: 15px;
      left: 15px;
    }

    .hero-logo {
      height: 45px;
    }

    .hero-certifications {
      bottom: 15px;
      right: 15px;
    }

    .cert-carousel {
      width: 60px;
      height: 45px;
    }

    .cert-icon {
      height: 25px;
    }

    .indicator {
      width: 6px;
      height: 6px;
    }

    .about-us .about-content,
    .contact-content {
      grid-template-columns: 1fr;
    }

    .product-image-wrapper {
      width: 150px;
      height: 150px;
    }

    /* 质量认证响应式 */
    .certification-item {
      width: 100px;
      height: 70px;
      padding: 10px;
    }

    .carousel-btn {
      width: 35px;
      height: 35px;
      font-size: 16px;
    }

    /* 视频响应式 */
    .video-section {
      padding: 40px 0;
    }

    .video-wrapper {
      max-width: 100%;
      padding: 0 15px;
    }

    .homepage-video {
      min-height: 250px;
      border-radius: 8px;
    }

    /* 流程步骤响应式 */
    .process-steps {
      padding: 40px 0;
    }

    .steps-grid {
      gap: 30px;
      margin-top: 30px;
    }

    .step-item {
      max-width: 160px;
      min-width: 120px;
      padding: 15px 10px;
    }

    .step-number {
      width: 50px;
      height: 50px;
      font-size: 20px;
      margin-bottom: 15px;
    }

    .step-title {
      font-size: 16px;
      margin: 12px 0 6px;
    }

    .step-description {
      font-size: 13px;
    }

    .step-icon img {
      width: 40px;
      height: 40px;
    }
  }

  /* 小屏幕优化 */
  @media (max-width: 480px) {
    .steps-grid {
      gap: 20px;
      flex-direction: column;
      align-items: center;
    }

    .step-item {
      max-width: 250px;
      min-width: 200px;
    }

    .video-wrapper {
      padding: 0 10px;
    }

    .homepage-video {
      min-height: 200px;
    }
  }
</style>